<template>
  <el-dialog
    title="消息列表"
    width="1400px"
    :visible.sync="visible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
  >
    <div class="header">
      <el-form :inline="true" :model="queryForm" size="small" class="query-form">
        <el-form-item label="消息标题">
          <el-input v-model="queryForm.title" placeholder="请输入" clearable></el-input>
        </el-form-item>
        <el-form-item label="消息状态">
          <el-select v-model="queryForm.status" clearable>
            <el-option label="未读" value="0"></el-option>
            <el-option label="已读" value="1"></el-option>
            <el-option label="已处理" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="消息类型">
          <el-select v-model="queryForm.bizType" clearable>
            <el-option label="站内信" value="2"></el-option>
            <el-option label="订单审核" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            clearable
            v-model="datetime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="content">
      <div class="content-item">
        <div class="person-table">
          <el-table
            :data="tableData"
            size="small"
            :loading="loading"
            height="360px"
            style="width: 100%"
          >
            <el-table-column prop="title" label="消息标题"></el-table-column>
            <el-table-column prop="content" label="消息内容"></el-table-column>
            <el-table-column prop="biztype" label="消息类型" width="120px">
              <template slot-scope="scope">
                <span>{{
                  scope.row.biztype === 1 ? '订单审核'
                  : scope.row.biztype === 2 ? '站内信'
                  : ''
                  }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="消息状态" width="120px">
              <template slot-scope="scope">
                <span>{{
                  scope.row.status === 0 ? '未读'
                  : scope.row.status === 1 ? '已读'
                  : scope.row.status === 2 ? '已处理'
                  : ''
                  }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="180px"></el-table-column>
            <el-table-column label="操作" width="100">
              <template slot-scope="scope">
                <el-button type="primary" size="small"
                           @click="onInfo({index: scope.$index, row: scope.row})"
                >详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            class="pagination"
            layout="prev, pager, next, jumper, total"
            :page-size="queryForm.limit"
            :current-page="queryForm.page"
            :total="pagination.total"
            @current-change="pageChange">
          </el-pagination>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submit">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {mapActions} from 'vuex'
	export default {
		name: 'message-list',
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      info: {
        type: Object,
        default: null
      }
    },
    data () {
      return {
        queryForm: {
          page: 1,
          limit: 10,
          title: '',
          status: '',
          bizType: '',
          startTime: '',
          endTime: ''
        },
        pagination: {
          total: 0
        },
        datetime: [],
        tableData: [],
        loading: false
      }
    },
    mounted () {
      this.queryList()
    },
    methods: {
      ...mapActions('d2admin/sys.person', [
        'messageList'
      ]),
      // 查询列表
      queryList () {
        if (this.datetime && this.datetime[0]) {
          this.queryForm.startTime = this.$dateFormat('yyyyMMdd', this.datetime[0]) + '000000'
        } else {
          this.queryForm.startTime = ''
        }
        if (this.datetime && this.datetime[1]) {
          this.queryForm.endTime = this.$dateFormat('yyyyMMdd', this.datetime[1]) + '235959'
        } else {
          this.queryForm.endTime = ''
        }
        this.loading = true
        this.messageList(this.queryForm).then(res => {
          this.loading = false
          this.tableData = res.list
          this.pagination.total = res.totalCount
        }).catch(err => {
          this.loading = false
        })
      },
      // 其他用途调用
      queryHandle (page) {
        this.queryForm.page = page
        this.queryList()
      },
      // 切换分页
      pageChange (curr) {
        this.queryHandle(curr)
      },
      // 点击查询按钮
      onSubmit () {
        this.queryHandle(1)
      },
      submit () {
        this.$emit('submit', false)
      }
    }
	}
</script>

<style lang="scss" scoped>
  .header {
    display: flex;
    .dispatch-type {
      width: 500px;
    }
    .query-form {
      .el-form-item--mini.el-form-item,
      .el-form-item--small.el-form-item {
        .el-input-number--small {
          width: 110px;
        }
        .el-input--small,
        .el-select--small,
        .el-cascader--small {
          width: 180px;
        }
      }
    }
  }
  .content {
    .person-table {
      border: 1px solid #eee;
      padding: 20px;
    }
  }
</style>
